import { Link } from 'react-router-dom';
import { Check, Zap, Globe, Shield } from 'lucide-react';
import Button from '../../components/Button';
import FAQItem from '../../components/FAQItem';
import { useLocalizedLink } from '../../hooks/useLocalizedLink';
import { useLanguage } from '../../contexts/LanguageContext';

const DynamicResidentialIPv6 = () => {
  const { getLink } = useLocalizedLink();
  const { t } = useLanguage();

  const getFeatures = (planKey: string) => {
    const features = t(`pricing.pricingPages.dynamic.plans.${planKey}.features`);
    return Array.isArray(features) ? features : [];
  };

  const trafficPlans = [
    {
      name: t('pricing.pricingPages.dynamic.plans.starter.name'),
      traffic: '10GB',
      price: '$7.5',
      period: t('pricing.pricingPages.dynamic.plans.starter.period'),
      pricePerGB: '$0.75/GB',
      description: t('pricing.pricingPages.dynamic.plans.starter.description'),
      features: getFeatures('starter'),
      popular: false,
    },
    {
      name: t('pricing.pricingPages.dynamic.plans.professional.name'),
      traffic: '50GB',
      price: '$35',
      period: t('pricing.pricingPages.dynamic.plans.professional.period'),
      pricePerGB: '$0.70/GB',
      description: t('pricing.pricingPages.dynamic.plans.professional.description'),
      features: getFeatures('professional'),
      popular: true,
      popularLabel: t('pricing.pricingPages.dynamic.plans.professional.popular'),
    },
    {
      name: t('pricing.pricingPages.dynamic.plans.enterprise.name'),
      traffic: '200GB',
      price: '$125',
      period: t('pricing.pricingPages.dynamic.plans.enterprise.period'),
      pricePerGB: '$0.625/GB',
      description: t('pricing.pricingPages.dynamic.plans.enterprise.description'),
      features: getFeatures('enterprise'),
      popular: false,
    },
  ];

  return (
    <div className="w-full">
      {/* Header */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <div className="inline-flex items-center justify-center p-2 bg-[#00d4ff]/10 rounded-full mb-4">
            <Zap className="text-[#00d4ff]" size={32} />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('pricing.pricingPages.dynamic.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto">
            {t('pricing.pricingPages.dynamic.subtitle')}
          </p>
        </div>
      </section>

      {/* Features */}
      <section className="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#00d4ff]/10 rounded-full mb-4">
                <Globe className="text-[#00d4ff]" size={32} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('pricing.pricingPages.dynamic.featureCards.global.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                {t('pricing.pricingPages.dynamic.featureCards.global.description')}
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#00d4ff]/10 rounded-full mb-4">
                <Zap className="text-[#00d4ff]" size={32} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('pricing.pricingPages.dynamic.featureCards.flexible.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                {t('pricing.pricingPages.dynamic.featureCards.flexible.description')}
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#00d4ff]/10 rounded-full mb-4">
                <Shield className="text-[#00d4ff]" size={32} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('pricing.pricingPages.dynamic.featureCards.unlimited.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                {t('pricing.pricingPages.dynamic.featureCards.unlimited.description')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Plans */}
      <section className="bg-white dark:bg-gray-900 py-16 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-[#0f1c3f] dark:text-white mb-4">
              {t('pricing.pricingPages.dynamic.plansTitle')}
            </h2>
            <p className="text-gray-600 dark:text-gray-300">
              {t('pricing.pricingPages.dynamic.plansSubtitle')}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {trafficPlans.map((plan, index) => (
              <div
                key={index}
                className={`rounded-xl p-8 transition-all duration-300 flex flex-col ${
                  plan.popular
                    ? 'border-2 border-[#00d4ff] bg-white dark:bg-gray-800 relative shadow-xl'
                    : 'border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
                }`}
              >
                {plan.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-[#00d4ff] text-[#0f1c3f] dark:text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg">
                    {plan.popularLabel}
                  </div>
                )}
                <div className="flex-shrink-0 pt-2">
                  <h3 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                    {plan.name}
                  </h3>
                  <div className="text-4xl font-bold dark:text-white mb-2">
                    {plan.price}
                    <span className="text-lg">{plan.period}</span>
                  </div>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">
                    {plan.traffic}
                  </p>
                  <p className="text-xs text-[#00d4ff] mb-4">{plan.pricePerGB}</p>
                  <div className="h-16 mb-6">
                    <p className="text-sm text-gray-600 dark:text-gray-300">
                      {plan.description}
                    </p>
                  </div>
                  <div className="border-b border-gray-200 dark:border-gray-700 mb-6"></div>
                </div>

                <ul className="space-y-3 mb-8 flex-grow">
                  {plan.features.map((feature: string, idx: number) => (
                    <li key={idx} className="flex items-start">
                      <Check
                        className="text-[#00c853] mr-2 mt-1 flex-shrink-0"
                        size={18}
                      />
                      <span className="text-gray-700 dark:text-gray-300 text-sm">
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>

                <div className="mt-auto">
                  <Link to={getLink('/pricing/purchase-dynamic-residential')}>
                    <Button
                      variant={plan.popular ? 'gradient' : 'outline'}
                      fullWidth
                    >
                      {t('pricing.pricingPages.dynamic.selectPlan')}
                    </Button>
                  </Link>
                </div>
              </div>
            ))}
          </div>

          {/* Custom Plan */}
          <div className="mt-12 text-center">
            <div className="inline-block bg-gray-50 dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('pricing.pricingPages.dynamic.needMore')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('pricing.pricingPages.dynamic.customPlan')}
              </p>
              <Link to={getLink('/support')}>
                <Button variant="outline">{t('pricing.pricingPages.dynamic.contactSales')}</Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ or Additional Info */}
      <section className="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
        <div className="container mx-auto px-4 max-w-4xl">
          <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-8 text-center">
            {t('pricing.pricingPages.dynamic.faq.title')}
          </h2>
          <div className="space-y-4">
            <FAQItem
              question={t('pricing.pricingPages.dynamic.faq.q1.question')}
              answer={t('pricing.pricingPages.dynamic.faq.q1.answer')}
              defaultOpen={true}
            />
            <FAQItem
              question={t('pricing.pricingPages.dynamic.faq.q2.question')}
              answer={t('pricing.pricingPages.dynamic.faq.q2.answer')}
            />
            <FAQItem
              question={t('pricing.pricingPages.dynamic.faq.q3.question')}
              answer={t('pricing.pricingPages.dynamic.faq.q3.answer')}
            />
            <FAQItem
              question={t('pricing.pricingPages.dynamic.faq.q4.question')}
              answer={t('pricing.pricingPages.dynamic.faq.q4.answer')}
            />
          </div>
        </div>
      </section>
    </div>
  );
};

export default DynamicResidentialIPv6;
